<template>
<div style="">
    <van-nav-bar
        style="position:sticky;" 
        title="小二同学"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="box-con" id="boxcon">
        <div class="allmsgs" id="allmsgs" ref="allmsgs">
            <div v-for="(item,index) in list" :key="index" class="text item">
                <div v-if="item.type=='user'" class='rightline'>
                    <p class="msg user">{{item.msg}} </p>
                    <van-image
                        class="van-image"
                        width="30"
                        height="30"
                        round
                        :src="photo"
                        fit="cover"
                    />
                    <!-- src="http://127.0.0.1:9999/images/aiheadimg.webp" -->
                </div>
                <div v-if="item.type=='ai'" class='leftline'> 
                    <!-- <el-avatar :size="size"></el-avatar> -->
                    
                    <van-image
                        class="van-image"
                        width="30"
                        height="30"
                        round
                        :src="require('../../assets/aiheadimg.webp')"
                        fit="cover"
                    />
                    <p class="msg ai">{{item.msg}}</p>
                </div>
            </div>
        </div>
        <!-- <div class="sendline">
            <van-field v-model="value" label="文本" placeholder="请输入用户名" />
            <van-button @click="sendmsg" round>发送</van-button>
        </div> -->
        <van-goods-action>
            <input style="" @keyup.enter="sendmsg" class="sendinput" v-model="userenter"  placeholder="请输入内容" />
            <van-goods-action-button
                class="sendbtnai"
                type="danger"
                text="发送"
                @click="sendmsg"
            />
        </van-goods-action>
    </div>
</div>
</template>

<script>
import io from 'socket.io-client'
import {getItem} from '@/utils/localfun'
export default {
name:'ai',
data(){
    return {
        clink_talk:'',
        size:'medium',
        ai_talk:'',
        circleUrl:'',
        userenter:'',
        photo:'',
        list:[
            {type:'ai',msg:'你好，我是小二同学。'},
        ]
    }
},
methods:{
    onClickLeft(){
        this.$router.go(-1)
    },
    initscoket(){
        let socket=io('http://toutiao.itheima.net', {
        query: {
            token: '823484f7-ef96-4675-881a-5fdbd646287b'
        },
        transports: ['websocket']
        })
        return socket
    },

    sendmsg(){
        let msg=this.userenter
        this.userenter=''
        this.list.push({type:'user',msg})
        let socket=this.initscoket()
        socket.emit("message", {msg,timestamp:Date.now()})
        socket.on("message", (data) => {
            this.list.push({type:'ai',msg:data.msg})
        })
    }
},
created(){
    let userinfo =getItem('userinfo')
    console.log(userinfo.photo)
    if(!userinfo.photo){this.photo='../../assets/aiheadimg.webp'}else{this.photo=userinfo.photo}
},
watch:{
    //将滚动条滚动到最底部
    list(){
        this.$nextTick(function(){
            var div = document.getElementById('boxcon');
            div.scrollTop = div.scrollHeight;
        })
    }
},
// activated(){
//     this.circleUrl=this.$store.getters.avatar
// }
}
</script>

<style>
    /*新增css*/
    p.msg{position: relative;font-size:14px;color:#000;background: rgb(252, 64, 64);border-radius: 20px;padding:15px;color:white}
    p.msg.ai::before{
        content:'';
        display:block;
        width:0;
        height:0;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-right:20px solid rgb(252, 64, 64);
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        left:-12px;
    }
    p.msg.user::after{
        content:'';
        display:block;
        width:0;
        height:0;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-left:20px solid rgb(252, 64, 64);
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        right:-12px;
    }
    .box-con{
        padding:20px;
        box-sizing:border-box;
        background: #f7f7f7;
        width: 100%;
        justify-content: center;
        height: 86vh;
        overflow-y:auto;
        align-items: center;
    }
    .rightline{
        display:flex;
        justify-content: flex-end;
        text-align: right;
        align-items: center;
    }
    
    .leftline{
        display:flex;
        justify-content: flex-start;
        text-align: left;
        align-items: center;
    }
    .leftline .van-image{
        flex-shrink: 0;
        margin-right:20px;
    }
    .rightline .van-image{
        flex-shrink: 0;
        margin-left:20px;
    }
    .sendinput{
        width:70%;
        height:70px;
        border:none;
        font-size:15px;
        background:rgb(230, 230, 230);
        border-radius:60px;
        padding-left:30px;
        color:#000;
        margin:0 15px;
    }
    .sendbtnai{
        height:70px
    }
    
   
   
</style>